<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>文件容量统计</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 95%"></div>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">

    //文件容量统计
    spaceFile();

    /**
     * 文件容量统计
     */
    function spaceFile() {
        $.ajax({
            url : 'cloud-space/file',
            type : 'get',
            dataType : 'json',
            success: function (result) {
                if (result.code == 200) {
                    let data = result.data;
                    myChart.setOption({
                        dataset: {
                            source: [
                                data.dateList,
                                data.pictureList,
                                data.documentList,
                                data.audioList,
                                data.videoList
                            ]
                        },
                        series: [
                            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                            {
                                type: 'pie',
                                id: 'pie',
                                radius: '30%',
                                center: ['50%', '25%'],
                                emphasis: {focus: 'data'},
                                label: {
                                    formatter: '{b}: {@' + data.date + '} ({d}%)'
                                },
                                encode: {
                                    itemName: '日期',
                                    value: data.date,
                                    tooltip: data.date}
                            }
                        ]
                    });
                }
            }
        });
    }

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    setTimeout(function () {

        option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: []
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {focus: 'data'},
                    label: {},
                    encode: {}
                }
            ]
        };

        myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });

        myChart.setOption(option);

    });

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>